<template>
	<m-layout class="layout-box" title="" barBg="unset" color="#fff" gap="0" :goBack="false">
		<view class="content-box">
			<view class="box plr-24">
				<view class="from flex-column">
					<m-block class="flex-column ai-center" bgColor="unset" gap="200 0 60">
						<text class="fs40">歡迎來到GRBQ農場</text>
						<text class="fs24 text-grey mt-4">請在下方註冊您的賬號，我們將給您提供極致的服務</text>
					</m-block>
					<text class="fs30 mb-12">啟動碼</text>
					<m-block gap="0 24 0 12" spa="0 0 20" radius="20">
						<m-fromItem border="0" icon="yqr" iconColor="#999999" placeholder="請輸入農場啟動碼"
							v-model="farmActivationCode" :disabled="disable">
							<view class="" slot="right" @click="scanCode">
								<m-icon type="icon-saoyisao" size="40" />
							</view>
						</m-fromItem>
					</m-block>
					<text class="fs30 mb-12">密碼</text>
					<m-block gap="0 24 0 12" spa="0 0 20" radius="20">
						<m-fromItem type="password" border="0" icon="mima" iconColor="#999999" placeholder="請輸入密碼"
							v-model="password">
							<!-- <view class="" slot="right" @click="">
								<m-icon type="icon-saoyisao" size="40" />
							</view> -->
						</m-fromItem>
					</m-block>
					<text class="fs30 mb-12">確認密碼</text>
					<m-block gap="0 24 0 12" spa="0 0 20" radius="20">
						<m-fromItem type="password" border="0" icon="mima" iconColor="#999999" placeholder="請再次輸入密碼"
							v-model="password2" />
					</m-block>
					<text class="fs30 mb-12">邀請碼</text>
					<m-block gap="0 24 0 12" spa="0 0 20" radius="20">
						<m-fromItem border="0" icon="yqr" iconColor="#999999" placeholder="請輸入邀請碼" v-model="invcode"
							:disabled="disable">
							<view class="" slot="right" @click="scanCode2">
								<m-icon type="icon-saoyisao" size="40" />
							</view>
						</m-fromItem>
					</m-block>
					<view class="hint flex">
						<m-icon :type="isChecked ? 'icon-xuanzhong' : 'icon-fuxuanxiangweixuanzhong'" size="34"
							spa="0 10 0 0" @click="isChecked = !isChecked"
							:color="isChecked ? 'var(--theme)' : ''"></m-icon>
						<text @click="isChecked = !isChecked" class="">我已閱讀並同意</text>
						<text class="yhxy" @click="goWeb('/static/html/agreement.html')">《用戶协议》</text>
						<text>和</text>
						<text class="yhxy" @click="goWeb('/static/html/privacy.html')">《隱私协议》</text>
					</view>
					<view style="margin-top: 30rpx; margin-bottom: 40rpx">
						<m-button @click="register">立即註冊</m-button>
					</view>
					<view class="" @click="Jump('/pages/login/login')">
						<m-button type="hollow">去登錄</m-button>
					</view>
				</view>
			</view>
		</view>
		<downLink v-if="disable" class="downLinKBox" :type="2" />
		<!-- <ad-rewarded-video adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload"
			@close="onadclose" @error="onaderror">
			<button :disabled="loading" :loading="loading">显示广告</button>
			<view v-if="error">{{error}}</view>
		</ad-rewarded-video> -->
	</m-layout>
</template>

<script>
	import {
		email,
		mobile
	} from '@/libs/fn/verify.js'; // 引入验证工具库
	import {
		SendCode_Phone,
		SendCode_Mail
	} from '@/api/Ctrls.js'; // 引入公用接口库
	import {
		UserRegister,
		IMEI_PhoneRegister
	} from '@/api/Users.js'; // 引入注册接口
	import downLink from '../components/link.vue';
	import cookie from '@/utils/auth.js';
	import {
		uni_scanCode
	} from '@/utils/uniTool.js';
	export default {
		components: {
			downLink
		},
		data() {
			return {
				Token: cookie.get('Token'),
				disable: false,
				isChecked: false, // 用户协议是否选中
				password: '',
				password2: '',
				code: '',
				invcode: '',

				timeObj: '',
				timer: 0,
				codeLoading: false,
				farmActivationCode: ''
			};
		},
		watch: {
			timer(val) {
				if (val <= 0) {
					this.timer = 0;
					clearInterval(this.timeObj);
				}
			}
		},
		onLoad({
			invcode
		}) {
			this.$nextTick(() => {
				this.invcode = invcode ? invcode : this.Cookie.get('Invcode');
				this.disable = invcode ? true : false;
			});
		},
		methods: {
			// onadload(e) {
			// 	console.log('广告数据加载成功');
			// },
			// onadclose(e) {
			// 	const detail = e.detail
			// 	// 用户点击了【关闭广告】按钮
			// 	if (detail && detail.isEnded) {
			// 		// 正常播放结束
			// 		console.log("onadclose " + detail.isEnded);
			// 	} else {
			// 		// 播放中途退出
			// 		console.log("onadclose " + detail.isEnded);
			// 	}
			// },
			// onaderror(e) {
			// 	// 广告加载失败
			// 	console.log("onaderror: ", e.detail);
			// },
			async scanCode2() {
				const res = await uni_scanCode();
				this.invcode = res;
			},
			async scanCode() {
				const res = await uni_scanCode();
				this.farmActivationCode = res;
			},
			goWeb(url) {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + url
				});
			},
			///////////////////////////////////// 点击事件 ////////////////////////////////////////
			// 勾选
			checkThe() {
				this.isChecked = !this.isChecked;
			},
			// 用户协议点击
			chenke() {
				this.$refs.popup.open();
			},
			// 协议弹窗确认按钮点击
			confirm() {
				this.isChecked = true;
				this.$refs.popup.close();
			},
			///////////////////////////////////// 组件监听 ////////////////////////////////////////
			// 再次输入密码监听
			secondary() {
				if (this.password != this.password2) {
					this.Toast('两次密码输入不一致');
					this.password2 = '';
				}
			},
			// 注册提交
			async register() {
				if (!this.farmActivationCode) return this.Toast('请输入激活码');
				if (!this.invcode) return this.Toast('请输入邀请码');
				if (!this.password) return this.Toast('请输入密码');
				if (this.password != this.password2) return this.Toast('两次密码输入不一致');
				// if (!this.invcode) return this.Toast('请输入邀请码')
				if (!this.isChecked) return this.Toast('请勾选用户协议');
				const {
					success,
					msg
				} = await IMEI_PhoneRegister({
					deviceToken: cookie.get('DeciceToken') || '',
					password: this.password,
					farmActivationCode: this.farmActivationCode,
					invcode: this.invcode
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
		background-image: url('@/static/images/pages/login/registerBg.png');
		background-repeat: no-repeat;
		background-size: 100%, 100%;
	}

	.layout-box {
		box-sizing: border-box;
		background-image: url('@/static/images/pages/login/loginbg_img.png');
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 490rpx 457rpx;
	}

	// 背景
	.content-box {
		padding-top: 120rpx;

		.box {
			.from {
				border-radius: 60rpx 60rpx 0 0;
				padding: 40rpx 36rpx 54rpx;
				overflow: hidden;

				.block {
					background: #ffffff;
				}

				.from-item {
					margin: 0;
				}

				.code {
					.from-item {
						padding: 15rpx 0;
					}
				}
			}
		}

		.hint {
			padding-bottom: 20rpx;
			padding-top: 30rpx;

			text {
				font-size: var(--fs_28);
				color: var(--text_1);
			}

			.yhxy {
				color: var(--theme);
			}
		}
	}

	.popup_title {
		font-size: 36rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.popup_bgimg {
		width: 246rpx;
		height: 51rpx;
		position: absolute;
		top: 0;
		left: -18rpx;
	}

	.popup_text {
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
	}

	.popup_text1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #222222;
	}

	.popup_text2 {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin: 10rpx 0 24rpx 0;
	}

	.scroll-box {
		height: 800rpx;
		flex: 1;
		background: #fff;
		overflow-y: scroll;

		/* 隐藏滚动条 */
		::-webkit-scrollbar {
			display: none;
		}

		.ul {
			view:nth-of-type(2) {
				font-size: 24rpx;
			}
		}
	}

	::v-deep .uni-popup__wrapper {
		width: 100%;
	}
</style>